<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>

    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入运营记录"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/竞店博主登记.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/mct/competing-store-blogger/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="removeCondShowed"
      title="批量清理"
      width="500px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-form ref="form" :model="removeCondForm" :rules="removeCondRule" label-width="80px">
        <el-form-item prop="registerDate" label="日期">
          <el-date-picker
            v-model="removeCondForm.registerDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            size="mini"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="{
              ...dateRangePickerOptions,
              disabledDate: (time) => {
                return time.getTime() > Date.now()
              }
            }"
          ></el-date-picker>

        </el-form-item>
        <el-form-item prop="storeName" label="竞店名称">
          <el-input v-model="removeCondForm.storeName" class="input-with-select" size="mini"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="removeCondShowed = false">取消</el-button>
        <el-button size="mini" type="primary" :loading="isRemovingCond" @click="handleRemoveCond">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import { competingStoreBloggerApi } from '@/feature/mct/infra/api/competingStoreBloggerApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import { dateRangePickerOptions } from '@/framework/constant/DatePickerOptions'
import FileUploader from '@/framework/components/FileUploader'
import DateType from '@/framework/constant/DateType'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import DateUtil from '@/framework/infra/util/DateUtil'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'

export default {
  components: { FileUploader, CURDTable },
  data() {
    return {
      importDialogShowed: false,
      removeCondShowed: false,
      dateRangePickerOptions,
      isRemovingCond: false,
      storeNameList: [],
      removeCondForm: {
        registerDate: [],
        storeName: ''
      },
      removeCondRule: {},
      option: {
        requestApi: competingStoreBloggerApi,
        showSelection: true,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            width: 120,
            searchable: true,
            // 搜索缓存
            searchCached: true,
            span: 24,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '日期',
            prop: 'registerDate',
            required: true,
            searchable: true,
            width: 100,
            defaultValue: DateUtil.currentDate(),
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            type: ColumnType.DATE
          },
          {
            label: '竞店名称',
            width: 'auto',
            required: true,
            formCached: true,
            autocomplete: (queryString, cb) => {
              const restaurants = this.storeNameList
              const results = queryString ? restaurants.filter(el => el.value.includes(queryString)) : restaurants
              // 调用 callback 返回建议列表的数据
              cb(results.map(el => ({
                value: el.value
              })))
            },
            prop: 'storeName',
            searchable: true
          },
          {
            label: '知衣主图',
            required: true,
            width: 100,
            prop: 'cover',
            type: ColumnType.IMAGE
          },
          // {
          //   label: '原博主ID',
          //   width: 'auto',
          //   required: false,
          //   searchable: true,
          //   prop: 'bloggerNo'
          // },
          {
            label: '原博主名称',
            width: 'auto',
            searchable: true,
            required: false,
            prop: 'bloggerName'
          },
          {
            label: '原图链接',
            // required: true,
            viewAsLink: true,
            prop: 'link',
            qrcode: true,
            searchable: true,
            width: 100,
            span: 24,
            type: ColumnType.TEXTAREA
          },
          // {
          //   label: '原图二维码',
          //   // required: true,
          //   prop: 'link',
          //   searchable: false,
          //   width: 100,
          //   hiddenInForm: true,
          //   span: 24,
          //   type: ColumnType.QRCODE
          // },
          {
            label: '来源渠道',
            width: 100,
            searchable: true,
            prop: 'source',
            type: ColumnType.SELECT,
            options: dicApi.allOptions(SysDicTypeEnum.CHANNEL.id)
          },
          {
            label: '选款的理由',
            width: 100,
            prop: 'reason'
          },
          {
            label: '登记人',
            width: 100,
            searchable: true,
            prop: 'creatorId',
            hiddenInForm: true,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },
          {
            label: '修改人',
            options: adminApi.listAll(),
            prop: 'modifierId',
            type: ColumnType.SELECT,
            searchable: true,
            width: 100,
            hiddenInForm: true
          },
          {
            label: '是否找到原图博主',
            width: 130,
            prop: 'bloggerFoundedFlag',
            defaultValue: 0,
            hiddenInForm: true,
            searchable: true,
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  created() {
    this.loadStoreNameList()
  },
  methods: {
    handleClearAll() {
      this.removeCondForm.registerDate = []
      this.removeCondForm.storeName = ''
      this.removeCondShowed = true
    },
    loadStoreNameList() {
      competingStoreBloggerApi.storeOptions().then(opts => {
        this.storeNameList = opts
      })
    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    },
    onAddSuccess() {
      this.loadStoreNameList()
      return true
    },
    onEditSuccess() {
      this.loadStoreNameList()
      return true
    },
    handleRemoveCond() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isRemovingCond = true
          competingStoreBloggerApi.removeByCondition(this.removeCondForm).then(() => {
            this.removeCondShowed = false
            this.isRemovingCond = false
            this.$refs.table.reloadTable()
          }).catch(() => {
            this.isRemovingCond = false
          })
        }
      })
    }
  }
}
</script>

